<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-09-26 10:07:48
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-01-05 16:03:54
 * @FilePath: \ZHGD-Vue2\src\views\system\alarmManagement\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 报警管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :firstId="true" :show="show" @showLeft="showLeft" @queryVal="queryVal"
          @getFirstId="getFirstId" />
      </el-col>
      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="沥青拌合" name="0">
            <el-table border stripe v-loading="loading" :data="cementDataList" size="mini">
              <el-table-column label="预警范围" align="center">
                <template slot-scope="scope">
                  <el-tag type="info" v-if="scope.row.name == '低级预警范围'">{{
                    scope.row.name
                  }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.name == '中级预警范围'">{{ scope.row.name }}</el-tag>
                  <el-tag type="danger" v-if="scope.row.name == '高级预警范围'">{{ scope.row.name }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="下限值(%)" align="center">
                <template slot-scope="scope">
                  <span v-if="!edit0">{{ scope.row.downData || "-" }}</span>
                  <el-input v-else v-model="scope.row.downData" @change="validateInput(scope.row.downData)"
                    placeholder="请输入下限值"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="上限值(%)" align="center">
                <template slot-scope="scope">
                  <span v-if="!edit0">{{ scope.row.upperData || "-" }}</span>
                  <el-input v-else v-model="scope.row.upperData" @change="validateInput(scope.row.upperData)"
                    placeholder="请输入上限值"></el-input>
                </template>
              </el-table-column>
            </el-table>
            <div class="modifyBox">
              <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" v-hasPermi="['system:alarmManagement:edit']" @click="handleEdit('edit' + activeName)">{{ edit0 ? "保存" : "修改" }}</el-button>
              <el-button size="mini" v-if="edit0" @click="handleCancel('edit' + activeName)">取消</el-button>
            </div>
          </el-tab-pane>

          <el-tab-pane label="混凝土拌合" name="1">
            <el-table border stripe v-loading="loading" :data="hntAllList" size="mini">
              <el-table-column label="类别" align="center">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.hntType == 30">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                  <el-tag type="success" v-if="scope.row.hntType == 31">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                  <el-tag type="info" v-if="scope.row.hntType == 33">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.hntType == 34">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                  <el-tag type="danger" v-if="scope.row.hntType == 35">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                  <el-tag v-if="scope.row.hntType == 36">{{
                    scope.row.hntTypeName
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="低级预警">
                <el-table-column label="下限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.downLowWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.downLowWarning" @change="validateInput(scope.row.downLowWarning)"
                      placeholder="低级预警下限值"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="上限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.upLowWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.upLowWarning" @change="validateInput(scope.row.upLowWarning)"
                      placeholder="低级预警上限值"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column align="center" label="中级预警">
                <el-table-column label="下限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.downMiddleWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.downMiddleWarning"
                      @change="validateInput(scope.row.downMiddleWarning)" placeholder="中级预警下限值"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="上限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.upMiddleWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.upMiddleWarning"
                      @change="validateInput(scope.row.upMiddleWarning)" placeholder="中级预警上限值"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>

              <el-table-column align="center" label="高级预警">

                <el-table-column label="下限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.downAdvancedWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.downAdvancedWarning"
                      @change="validateInput(scope.row.downAdvancedWarning)" placeholder="高级预警下限值"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="上限值(%)" align="center">
                  <template slot-scope="scope">
                    <span v-if="!edit1">{{ scope.row.upAdvancedWarning || "-" }}</span>
                    <el-input v-else v-model="scope.row.upAdvancedWarning"
                      @change="validateInput(scope.row.upAdvancedWarning)" placeholder="高级预警上限值"></el-input>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="modifyBox">
              <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" v-hasPermi="['system:alarmManagement:edit']" @click="handleEdit('edit' + activeName)">{{ edit1 ? "保存" : "修改" }}</el-button>
              <el-button size="mini" v-if="edit1" @click="handleCancel('edit' + activeName)">取消</el-button>
            </div>
          </el-tab-pane>

          <el-tab-pane label="水稳拌合" name="2">
            <el-table border stripe v-loading="loading" :data="cementDataList" size="mini">
              <el-table-column label="预警范围" align="center">
                <template slot-scope="scope">
                  <el-tag type="info" v-if="scope.row.name == '低级预警范围'">{{
                    scope.row.name
                  }}</el-tag>
                  <el-tag type="warning" v-if="scope.row.name == '中级预警范围'">{{ scope.row.name }}</el-tag>
                  <el-tag type="danger" v-if="scope.row.name == '高级预警范围'">{{ scope.row.name }}</el-tag>
                </template>
              </el-table-column>

              <el-table-column label="下限值(%)" align="center">
                <template slot-scope="scope">
                  <span v-if="!edit2">{{ scope.row.downData || "-" }}</span>
                  <el-input v-else v-model="scope.row.downData" @change="validateInput(scope.row.downData)"
                    placeholder="请输入下限值"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="上限值(%)" align="center">
                <template slot-scope="scope">
                  <span v-if="!edit2">{{ scope.row.upperData || "-" }}</span>
                  <el-input v-else v-model="scope.row.upperData" @change="validateInput(scope.row.upperData)"
                    placeholder="请输入上限值"></el-input>
                </template>
              </el-table-column>
            </el-table>
            <div class="modifyBox">
              <el-button style="margin-right: 6px" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" v-hasPermi="['system:alarmManagement:edit']" :loading="btnLoading" @click="handleEdit('edit' + activeName)">{{ edit2 ? "保存" : "修改" }}</el-button>
              <el-button size="mini" v-if="edit2" @click="handleCancel('edit' + activeName)">取消</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import workSiteLeft from "@/views/components/workSiteLeft";
import { deptList } from "@/api/common/common";
import {
  alarmManagementList,
  updateAlarmManagement,
  getHntList,
  updateHnt
} from "@/api/system/alarmManagement";

export default {
  name: "alarmManagement", //报警管理
  data() {
    return {
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      btnLoading: false,
      activeName: "0", //0：沥青拌合；1：混凝土拌合；2：水稳拌合
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 水稳拌合站数据表格数据
      cementDataList: [],
      // 查询参数
      queryParams: {},
      edit0: false,
      edit1: false,
      edit2: false,
      hntList: [
        {
          deptId: '',
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 31,
          hntTypeName: "粉料",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        },
        {
          deptId: null,
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 30,
          hntTypeName: "石料",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        },
        {
          deptId: null,
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 33,
          hntTypeName: "水",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        },
        {
          deptId: null,
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 34,
          hntTypeName: "水泥",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        }, {
          deptId: null,
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 35,
          hntTypeName: "外加剂",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        }, {
          deptId: null,
          downAdvancedWarning: 0,
          downLowWarning: 0,
          downMiddleWarning: 0,
          hntType: 36,
          hntTypeName: "砂料",
          typeId: 1,
          typeName: "",
          upAdvancedWarning: 0,
          upLowWarning: 0,
          upMiddleWarning: 0,
        },
      ],
      hntAllList: []

    };
  },
  components: {
    workSiteLeft,
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.getFirstId();
    });
  },
  methods: {
    /** 查询数据列表 */
    getList(objData) {
      this.loading = true;
      if (objData.typeId == '1') {
        getHntList({ ...objData }).then((res) => {
          this.hntAllList = res.data.length ? res.data : this.hntList
          this.loading = false;
        })
      } else {
        alarmManagementList({ ...objData }).then((response) => {
          this.allData = response.data || {};
          // this.cementDataList = response.data;
          this.cementDataList = [
            {
              name: "低级预警范围",
              upperData: response?.data?.upLowWarning || 0,
              downData: response?.data?.downLowWarning || 0,
            },
            {
              name: "中级预警范围",
              upperData: response?.data?.upMiddleWarning || 0,
              downData: response?.data?.downMiddleWarning || 0,
            },
            {
              name: "高级预警范围",
              upperData: response?.data?.upAdvancedWarning || 0,
              downData: response?.data?.downAdvancedWarning || 0,
            },
          ];
          this.loading = false;
        });
      }
    },
    getFirstId(id) {
      if (id) {
        this.queryParams.deptId = id;
        let parame = {
          deptId: id,
          typeId: "0", //0：沥青拌合；1：混凝土拌合；2：水稳拌合
        };
        this.getList(parame);
      }
    },
    // 重置数据
    setResettingData() {
      this.cementDataList = [
        {
          name: "低级预警范围",
          upperData: this.allData.upLowWarning || 0,
          downData: this.allData.downLowWarning || 0,
        },
        {
          name: "中级预警范围",
          upperData: this.allData.upMiddleWarning || 0,
          downData: this.allData.downMiddleWarning || 0,
        },
        {
          name: "高级预警范围",
          upperData: this.allData.upAdvancedWarning,
          downData: this.allData.downAdvancedWarning,
        },
      ];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let parame = {
        deptId: this.queryParams.deptId,
        typeId: this.activeName, //0：沥青拌合；1：混凝土拌合；2：水稳拌合
      };
      this.getList(parame);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleDeptId(val) {
      // this.$set(this.queryParams, "deptId", val);
      // this.queryParams.deptId = val
      this.activeName = "0";
      this.handleClick();
    },
    handleClick(tab) {
      this.edit0 = false;
      this.edit1 = false;
      this.edit2 = false;
      let parame = {
        deptId: this.queryParams.deptId,
        typeId: tab?._props?.name || "0", //0：沥青拌合；1：混凝土拌合；2：水稳拌合
      };
      this.getList(parame);
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          F;
          done();
        })
        .catch((_) => { });
    },
    handleEdit(val) {
      if (this[val]) {
        if (this.activeName == '1') {
          this.hntAllList.forEach((v) => v.deptId = this.queryParams.deptId)
          updateHnt(this.hntAllList).then((res) => {
            if (res.code == 200) {
              this[val] = false;
              let parame = {
                deptId: this.queryParams.deptId,
                typeId: this.activeName, //0：沥青拌合；1：混凝土拌合；2：水稳拌合
              };
              this.getList(parame);
              this.$message.success("保存成功！");
            }
          })
        } else {
          let obj = {
            deptId: this.queryParams.deptId,
            downAdvancedWarning: this.cementDataList[2].downData,
            downLowWarning: this.cementDataList[0].downData,
            downMiddleWarning: this.cementDataList[1].downData,
            id: this.allData.id,
            typeId: this.allData.typeId || this.activeName,
            typeName: this.allData.typeName,
            upAdvancedWarning: this.cementDataList[2].upperData,
            upLowWarning: this.cementDataList[0].upperData,
            upMiddleWarning: this.cementDataList[1].upperData,
          };
          updateAlarmManagement(obj).then((res) => {
            if (res.code == 200) {
              this[val] = false;
              let parame = {
                deptId: this.queryParams.deptId,
                typeId: this.activeName, //0：沥青拌合；1：混凝土拌合；2：水稳拌合
              };
              this.getList(parame);
              this.$message.success("保存成功！");
            }
          });
        }

      } else {
        this[val] = true;
      }
    },
    handleCancel(val) {
      let parame = {
        deptId: this.queryParams.deptId,
        typeId: this.activeName, //0：沥青拌合；1：混凝土拌合；2：水稳拌合
      };
      this.getList(parame);
      this[val] = false;
    },
    validateInput(val) {
      const regex = /^[0-9.]+$/;
      if (regex.test(val)) {
        // 输入是数字
        if (val < 0) {
          this.$message.error("数值不能小于0");
          this.setResettingData();
        } else if (val > 100) {
          this.$message.error("数值不能大于100");
          this.setResettingData();
        }
      } else {
        // 输入不是数字
        // 可以阻止输入或者显示错误消息
        this.setResettingData();
        // 或者显示错误消息
        this.$message.error("只能输入数字");
      }
    },
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.queryParams.deptId = val.id;
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss">
.app-alarmManagement {
  padding-top: 16px;
  user-select: none;
}

.modifyBox {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>

